<template>
  <footer>
    <div class="clear"></div>
    <a href="/"><el-divider class="md-divider">经历网 - 为留住您的经历而生！</el-divider></a>
    <!-- sm -->
    <div>
      <a href="/"><p class="sm-title">经历网</p></a>
      <el-divider class="sm-divider">为留住您的经历而生！</el-divider>
    </div>
    <!-- /sm -->
    <div class="text">
      <p>本站部分图片素材选自网络，期待摄影者联系署名或索要版税！</p>
      <p>经历网官方QQ群：572844626</p><br>
      <span>
          Copyright &copy;2022 jili20.com &nbsp;All Rights Reserved&nbsp;
        </span>
      <!-- nofollow 告诉搜索引擎"不要追踪此网页上的链接或不要追踪此特定链接 -->
      <nuxt-link class="num" to="" target="_blank" rel="nofollow" :underline="false"> 粤ICP备16666888号-99</nuxt-link>
    </div>
  </footer>
</template>
<script>
export default {
  name: "Header"
}
</script>
<style scoped lang="less">

.md-divider {
  background-color: black;
}

footer {
  clear: both;
  width: 100%;
  background-color: black;

  .clear {
    height: 1px;
    width: 100px;
  }

  .el-divider__text {
    color: #B1B1B1;
    background: black;
  }

  .el-divider {
    background: #999696;
  }

  span {
    text-align: center;
    color: #B1B1B1;
  }

  .text {
    padding-top: 5px;
    margin-bottom: 30px;
    text-align: center;
    font-size: 14px;
    color: #B1B1B1;
  }

  .num {
    color: #B1B1B1;
  }

  .num:hover {
    color: #9932CC;
  }
}

/* md */
@media screen and (min-width: 960px) {
  footer {
    height: 180px;

    .sm-divider, .sm-title {
      display: none;
    }

    .text {
      p {
        line-height: 22px;
        font-size: 12px;
      }
    }
  }
}

/* sm */
@media screen and (max-width: 960px) {
  footer {
    height: 250px;

    .md-divider {
      display: none;
    }

    .sm-title {
      margin-top: 20px;
      font-size: 14px;
    }

    p {
      text-align: center;
      font-size: 12px;
      color: #B1B1B1;
    }

    .el-divider__text {
      font-size: 14px;
    }

    .text {
      p {
        font-size: 12px;
      }
    }
  }
}

</style>
